<template>
  <div class="baqsj-layout" :class="{ 'has-logo': showLogo }">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <div class="user-box">
      <UserInfo />
    </div>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        key="baqsj"
        :default-active="activeMenu"
        :collapse="false"
        background-color="#fff"
        text-color="#333"
        :unique-opened="false"
        active-text-color="#277fd6"
        :collapse-transition="true"
        :default-openeds="openMenus"
        mode="vertical"
      >
        <sidebar-item
          v-for="route in permissionMenuList"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
      <div
        class="bottom-info"
        style="text-align: center; color: rgb(153, 153, 153); position: absolute; bottom: 25px; left: 0px; width: 100%; font-size: 12px; padding: 1px;"
      >
        <div class="font14 mb5">循数医疗™技术支持</div>
        <div class="font14">循数,让天下没有难做的医生</div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import UserInfo from '@/components/UserInfo/index'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'

export default {
  components: { SidebarItem, Logo, UserInfo },
  data() {
    return {
      openMenus: ['1', '2', '3', '4', '5'],
      menus: []
    }
  },
  computed: {
    ...mapGetters(['permission_routes', 'sidebar']),
    activeMenu() {
      console.log(this.permission_routes)
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      if (path == '/baqsj/review') {
        return localStorage.getItem('previousPath')
      }
      console.log(path)
      return path
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo
    },
    variables() {
      return variables
    },
    isCollapse() {
      return !this.sidebar.opened
    },
    permissionMenuList() {
      const currentApp = JSON.parse(localStorage.getItem('currentApp'))
      console.log(currentApp.mid)
      if (currentApp.mid != 'admin') {
        const menus = this.permission_routes.filter(item => item.mid == currentApp.mid)
        if (currentApp.mid == 'system') {
          return menus
        } else {
          return menus[0].children
        }
      } else {
        const menus = this.permission_routes.filter(item => item.mid != 'business' && item.mid != 'baqsj' && item.mid != 'xjsxxm')
        return menus
      }
    }
  },
  watch: {
    sidebarOpened(val) {
      this.collapsed = !val
    },
    permissionMenuList() {
      this.menus = this.permissionMenuList
    }
  }
}
</script>
<style lang="scss" scoped>
  .user-box{
    padding:10px;
  }
</style>
